<!DOCTYPE html>
<html lang="en">
<head>
	<title>jquery.carouselSlider</title>
	<meta charset="utf-8" />
	<meta name="keywords" content="carousel, jquery carousel, responsive carousel, multiple carousel, mobile carousel, carousel with preloader, simple carousel" />
	<meta name="description" content="jQuery Multiple Carousel" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<link href="jquery.carouselSlider.css" media="screen" rel="stylesheet" type="text/css" />
	<style>
		/*page styles - not required for carousel plugin*/
		html, body, div, span, applet, object, iframe, input, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, fieldset, label, form {
			border: 0 none;
			margin: 0;
			outline: 0 none;
			padding: 0;
		}
		body{margin:20px;font:normal 12px tahoma;color:#000000;}
		h1{margin:0 0 20px 0;color:#aaaaaa;}
		.features{font-size:15px;list-style: disc inside none;margin:20px 0;font-weight:bold;}
		.features div{margin:20px 0 5px 0;}
		.features li{margin:0 0 0 10px;font-weight:normal;}
	</style>
</head>
<body>

<h1>jQuery Multiple Carousel</h1>
<ul class="features">Features:
	<li>Multiple Carousel in a page</li>
	<li>Responsive</li>
	<li>Touch enabled for mobile/tablet</li>
	<li>Loads only the first image of each Carousel during the page load</li>
	<li>Preloader for image</li>
</ul>
<!-- BEGIN: CAROUSEL -->
<!-- wrapper div can be removed if the carousel is wrapped with the container having specified width -->
<div class="wrapper">
	<div id="carousel1" class="carousel"></div>
	<div id="carousel2" class="carousel"></div>
	<div id="carousel3" class="carousel"></div>
</div>
<!-- END: CAROUSEL -->

<ul class="features">How to Use:
	<div>Step 1:</div>
	<li>Include the following css file in head tag 
		<pre>&lt;link href="jquery.carouselSlider.css" media="screen" rel="stylesheet" type="text/css" /&gt;</pre>
	</li>
	<div>Step 2:</div>
	<li>Include the following html inside body tag
		<pre>&lt;div class="wrapper"&gt;
	&lt;div id="carousel1" class="carousel"&gt;&lt;/div&gt;
	&lt;div id="carousel2" class="carousel"&gt;&lt;/div&gt;
	&lt;div id="carousel3" class="carousel"&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
	</li>
	<div>Step 3:</div>
	<li>Include the following js at the end of &lt;/body&gt; tag
		<pre>&lt;script type="text/javascript" src="jquery-1.7.0.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.carouselSlider.js"&gt;&lt;/script&gt;</pre>
	</li>
	<div>Step 4:</div>
	<li>Call the plugin
		<pre>$(document).ready(function() {
	$("#carousel1").carouselSlider({
		'images': ['img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg']
		//'imgPath' : '../../img/' //overwrite the image path, default image path will be './img/'
	});
	$("#carousel2").carouselSlider({
		'images': ['img3.jpg','img4.jpg','img1.jpg','img2.jpg','img5.jpg']
	});
	$("#carousel3").carouselSlider({
		'images': ['img5.jpg','img2.jpg','img1.jpg','img3.jpg','img4.jpg']
	});
});</pre>
	</li>
</ul>

<!-- BEGIN: SCRIPTS -->
<script src="jquery-1.7.0.min.js"></script>
<script src="jquery.carouselSlider.js"></script>
<script>
	<!-- CAROUSEL -->
	$(document).ready(function() {
		$("#carousel1").carouselSlider({
			'images': ['img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg']
			//'imgPath' : '../../img/' //overwrite the image path, default image path will be './img/'
		});
		$("#carousel2").carouselSlider({
			'images': ['img3.jpg','img4.jpg','img1.jpg','img2.jpg','img5.jpg']
		});
		$("#carousel3").carouselSlider({
			'images': ['img5.jpg','img2.jpg','img1.jpg','img3.jpg','img4.jpg']
		});
	});
</script>
<!-- END: SCRIPTS -->
</body>
</html>


